<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>信息总览</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <style>
        .uInfo{
            width:380px ;
            height:150px;
            margin-top:20px;
            margin-left:30px;
            margin-right:30px;
        }

        .box-card {
         border-radius:15px;
        }


    </style>


<body>
<div class="app" id="app">
    <div style="display:flex">
        <div class="uInfo animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <div style="display:flex;">
                    <div>
                        <i class="el-icon-coin" style="font-size:65px;color:#ffdf4a;"></i>
                    </div>
                    <div style="margin-left: 38%;padding-bottom: 20px;height:30px">
                        <el-label style="color:grey">学员总数</el-label>
                        <el-label style="font-size:28px">{{userTotal}}人</el-label>
                    </div>
                </div>
                <hr style="border: solid 1px #f7f7f7;">
                <div >
                    <i class="el-icon-refresh" style="font-size:20px;color:#bdd2df"></i>
                    <el-button type="text" style="font-size:20px;color:#bdd2df" @click="queryUserTotal">Update</el-button>
                </div>

            </el-card>
        </div>
        <div class="uInfo animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <div style="display:flex;">
                    <div>
                        <i class="el-icon-user" style="font-size:65px;color:#f4672b;"></i>
                    </div>
                    <div style="margin-left: 38%;padding-bottom: 20px;height:30px">
                        <el-label style="color:grey">教练总数</el-label>
                        <el-label style="font-size:28px">{{coachTotal}}人</el-label>
                    </div>
                </div>
                <hr style="border: solid 1px #f7f7f7;">
                <div >
                    <i class="el-icon-refresh" style="font-size:20px;color:#bdd2df"></i>
                    <el-button type="text" style="font-size:20px;color:#bdd2df"@click="queryCoachTotal">Update</el-button>
                </div>

            </el-card>
        </div>
        <div class="uInfo animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <div style="display:flex;">
                    <div>
                        <i class="el-icon-trophy-1" style="font-size:65px;color:#bdd2df;"></i>
                    </div>
                    <div style="margin-left: 38%;padding-bottom: 20px;height:30px">
                        <el-label style="color:grey">器材总数</el-label>
                        <el-label style="font-size:28px">{{eqTotal}}个</el-label>
                    </div>
                </div>
                <hr style="border: solid 1px #f7f7f7;">
                <div >
                    <i class="el-icon-refresh" style="font-size:20px;color:#bdd2df"></i>
                    <el-button type="text" style="font-size:20px;color:#bdd2df"@click="queryEqTotal">Update</el-button>
                </div>

            </el-card>
        </div>
        <div class="uInfo animate__backInUp animate__animated">
            <el-card class="box-card" style="width:100%;height:100%;">
                <div style="display:flex;">
                    <div>
                        <i class="el-icon-copy-document" style="font-size:65px;color:#96ddc1;"></i>
                    </div>
                    <div style="margin-left: 38%;padding-bottom: 20px;height:30px">
                        <el-label style="color:grey">课程总数</el-label>
                        <el-label style="font-size:28px">{{courseTotal}}门</el-label>
                    </div>
                </div>
                <hr style="border: solid 1px #f7f7f7;">
                <div >
                    <i class="el-icon-refresh" style="font-size:20px;color:#bdd2df"></i>
                    <el-button type="text" style="font-size:20px;color:#bdd2df"@click="queryCourseTotal">Update</el-button>
                </div>

            </el-card>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script>


    new Vue({
        el: '#app',
        data:{
            userTotal:'',
            coachTotal:'',
            eqTotal:'',
            courseTotal:'',
        },
        methods: {
            queryUserTotal(){
                axios.get("${pageContext.request.contextPath}/user/queryUserTotal").then(response =>{
                    if(response.data.code === 1){
                        this.userTotal= response.data.data;
                        this.$notify({title: '成功', message: '更新完成！', type: 'success'});
                    }
                })
            },
            queryCoachTotal(){
                axios.get("${pageContext.request.contextPath}/coach/queryCoachTotal").then(response =>{
                    if(response.data.code === 1){
                        this.coachTotal= response.data.data;
                        this.$notify({title: '成功', message: '更新完成！', type: 'success'});
                    }
                })
            },
            queryEqTotal(){
                axios.get("${pageContext.request.contextPath}/equipment/queryEquipmentTotal").then(response =>{
                    if(response.data.code === 1){
                        this.eqTotal= response.data.data;
                        this.$notify({title: '成功', message: '更新完成！', type: 'success'});
                    }
                })
            },
            queryCourseTotal(){
                axios.get("${pageContext.request.contextPath}/course/queryCourseTotal").then(response =>{
                    if(response.data.code === 1){
                        this.courseTotal= response.data.data;
                        this.$notify({title: '成功', message: '更新完成！', type: 'success'});
                    }
                })
            }
        },
        created() {
            this.queryUserTotal();
            this.queryCoachTotal();
            this.queryEqTotal();
            this.queryCourseTotal();
        }
    })



</script>
</body>
</html>
